<html>
  <head>
        <title>Bike Trails!</title>

    <script type="text/javascript"
      src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDtAJD6yDB6D-AcxMQohCKDRFkMiVSM56c&sensor=true&libraries=geometry,panoramio">
    </script>
    <script type="text/javascript" src="GPXParser.js"></script>
    <script type="text/javascript">

        var map;

        function initialize() {
        // set up all the options for the map
        var Fargo = new google.maps.LatLng(46.877186,-96.789803);
        var myOptions = {
          center: Fargo,
          zoom: 15,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        // create a map
        map = new google.maps.Map(document.getElementById("map"),
            myOptions);

        ////Upload GPX file to the map
        var xmlrequest = window.ActiveXObject ?
        	new ActiveXObject('Microsoft.XMLHTTP') :
        	new XMLHttpRequest();
        xmlrequest.open("GET","valley.gpx",true); // added comment
        xmlrequest.onreadystatechange = function()
        {   // when the xml is loaded completely
        	if(xmlrequest.readyState == 4)
        	{
        		xmlDOC = xmlrequest.responseXML;
        		parser = new GPXParser(xmlDOC, map);
        		parser.SetTrackColour("#ff00ff");    // set the color of the track
        		parser.SetTrackWidth(5);             // set the track width
        		parser.SetMinTrackPointDelta(0.001); // Set the minimum distance between trackpoints.
        		parser.AddTrackpointsToMap();        // add all the track points to the map
        		parser.AddWaypointsToMap();          // add all the way points to the map
        	}
        }
        xmlrequest.send();
        //////////////////////////////////////////////


        }// initialize



    </script>

  </head>
  <body onload="initialize()">

	<div id="map" style="float:left;width:100%; height:100%"></div>


  </body>
</html>
